(function(doc) {

	"use strict";

	// 默认参数
	var options = {
		elem: null,			// 输出元素
		width: null,		// 输出宽度
		height: null,		// 输出高度
		scale: 1,			// 输出需要缩放比例
		quality: 0.7,		// 输出质量（建议0.7-1.0）
		data: null
	}


	// 主函数
	var imageCompose = function(option, callback) {
		for (var i in option) {
			if (i in options) {
				options[i] = option[i];
			}
		}

		options.scale = option.width / Math.floor(option.elem.clientWidth - 2);

		// 输出图片
		drawImage(callback);
	}


	// 创建canvas
	var createCanvas = function(width, height) {
		var canvas = document.createElement("canvas");
		// $(canvas).css({
         //    'position': 'fixed',
         //    'z-index': 9999,
         //    'background-color': '#f00',
         //    'left': 0,
         //    'top': 0,
         //    'width': '100%',
         //    'height': '100%'
        // });
		// $("body").append(canvas);
		canvas.width = width;
		canvas.height = height;

		return canvas;
	}


	// 输出尺寸
	var outputSize = function(number) {
		return Math.ceil(number * options.scale);
	}

	// 输出图片
	var drawImage = function(callback) {

		// 按照zIndex排序
		options.data.sort(function(a, b) {
			return a.zIndex -  b.zIndex;
		});

		var canvas = createCanvas(options.width, options.height);
		var ctx = canvas.getContext("2d");

		// 设置背景颜色
		ctx.fillStyle = "rgba(0,0,0,0)";
		ctx.fillRect(0, 0, options.width, options.height);

		// 输出图片到canvas
		// 不管是否缩放还是移动先把画布顶点移动到元素中心
        var loadIndex=0;
		options.data.forEach(function(value, index) {
            var img = new Image();
            img.src = value.img;
            img.onload =function () {
                var width = outputSize(value.width);							// 输出宽度
                var height = outputSize(value.height);							// 输出高度
                var x = outputSize(value.x);									// x轴起点
                var y = outputSize(value.y);									// y轴起点
                var translateX = x + width / 2;									// 水平偏移
                var translateY = y + height / 2;								// 垂直偏移
                var rotate = value.rotate * Math.PI / 180;		// 旋转角度

                ctx.save();
                ctx.translate(translateX, translateY);
                ctx.rotate(rotate, rotate);
                ctx.scale(value.scale, value.scale);

                if (value.reverse) {
                    ctx.drawImage(img, y - translateY, x - translateX, height, width);
                } else {
                    ctx.drawImage(img, x - translateX, y - translateY, width, height);
                }
                ctx.restore();
                loadIndex += 1;
                if (loadIndex >= options.data.length - 1) {
                    // 从canvas导出图片
                    setTimeout(function () {
                        var imgstr = canvas.toDataURL("image/png", options.quality);
                        callback(imgstr);
                    },1000);
                }
            }
        });
	}

	window.imageCompose = imageCompose;

})(document);
